<script setup>
import {useStudyRoomStore} from "@/stores/index.js";
const store = useStudyRoomStore();
const closeWidget = () => {
  store.widgetSwitch.translate = false;
};
</script>

<template>
  <div class="sr-translate">
    <img src="../../assets/icon/StudyRoom/translate.png" alt="" class="sr-t-left">

    <div class="sr-t-middle">
      <input type="text" placeholder="输入单词或句子" class="srt-m-input">
      <div class="srt-m-bar"></div>
      <input type="text" class="srt-m-output" readonly>
    </div>

    <div class="sr-t-right">
      <div class="srt-r-top">
        <img src="../../assets/icon/StudyRoom/down.png" alt="">
      </div>
      <div class="srt-r-bottom">
        <div class="two-icon">
          <img src="../../assets/icon/StudyRoom/smile.png" alt="" class="icon1">
          <img src="../../assets/icon/StudyRoom/exit.png" alt="" class="icon2" @click="closeWidget">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.two-icon{
  width: 55px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 15px;
  .icon1, .icon2{
    width: 20px;
    height: 20px;
  }
}
.sr-translate {
  position: relative;
  width: 480px;
  height: 120px;
  left: 20px;
  top: 45px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  .sr-t-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    .srt-r-top {
      width: 36px;
      height: 36px;
      background-color: white;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        height: 18px;
      }
    }
  }
  .sr-t-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    .srt-m-input {
      width: 240px;
      height: 36px;
      border: none;
      border-radius: 18px;
      padding-left: 15px;
      &:focus {
        outline: none;
      }
    }
    .srt-m-output {
      width: 240px;
      height: 36px;
      border: none;
      border-radius: 18px;
      padding-left: 10px;
      &:focus {
        outline: none;
      }
    }
    .srt-m-bar {
      width: 280px;
      height: 1px;
      background-color: #9a9a9a;
    }
  }
  .sr-t-left {
    width: 42px;
    height: 42px;
  }
}
</style>
